<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout-sider breakpoint="lg" collapsed-width="0">
      <div class="logo">  <img src="~@/assets/logo.png" alt="logo" style="float:left;">  <span style="color: #fff;font-size:20px">中孚铝业</span></div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']" @select="onSelect">
        <a-menu-item key="1">
          <a-icon type="unordered-list" />
          <span class="nav-text">系统简介</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="unordered-list" />
          <span class="nav-text">操作说明</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="unordered-list" />
          <span class="nav-text">安装配置与运维</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0 }" > 
         
        <span  style="margin-left: 36px; font-size: 28px;"> 
          <a class="logout_title"><a-icon type="profile" style="color:black;margin-right:10px;" /><span style="color:black;margin-right:20px;" class="title">帮助文档</span>
            <a-icon type="appstore" @click="doHome" ></a-icon>
          </a>
        </span> 
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{  minHeight: screenHeight+'px',height: '100%' }"
          class="kancloud-markdown-body"> 
         
          
            <iframe id="iframeId" :src="url" frameborder="0" width="100%" :height="screenHeight" scrolling="auto"></iframe>
         
        </div>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">

      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
  export default {
    data() {
      return {
        selectKey: '1',
        screenHeight: document.body.clientHeight-167,
        url:"../../../doc/系统简介.htm"
      }
    },
    created() {

    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => { 
          window.screenHeight = document.body.clientHeight
          that.screenHeight = window.screenHeight-167
        })()
      }
    },
    methods: {
      doHome(){
        this.$router.push({ path: "/home/index" })
      }, 
      onSelect(item) {
        this.selectKey = item.key;
         if(this.selectKey =='1'){
            this.url = "../../../doc/系统简介.htm"
        }
        if(this.selectKey =='2'){
            this.url = "../../../doc/操作说明.htm"
        }
         if(this.selectKey =='3'){
            this.url = "../../../doc/安装配置与运维.htm"
        } 
      }
    },
  };
</script>

<style lang="less" scoped> 
  #components-layout-demo-responsive .logo {
    height: 32px; 
    margin: 16px;
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
  } 
  .kancloud-markdown-body {
    letter-spacing:2px;
    background: #fff;
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 44px 24px;
    display: block;
    line-height: 2.2;
    font-size: 18px;
    word-wrap: break-word;
    color: #525252;
    font-family: Helvetica Neue, NotoSansHans-Regular, AvenirNext-Regular, arial, Hiragino Sans GB, Microsoft Yahei, WenQuanYi Micro Hei, serif
  }
</style>